<template>
  <div class="mdui-container">
    <br />
    <div class="mdui-valign" v-on:click="$router.back()">
      <i class="mdui-icon material-icons">arrow_back</i>
      <h2>&nbsp商品编辑</h2>
    </div>
    <div id="comid" style="visibility: hidden">
      <div class="mdui-textfield">
        <label class="mdui-textfield-label">商品id</label>
        <br />
        <div style="font-size: 1.3em">{{ id }}</div>
      </div>
      <div class="mdui-textfield">
        <label class="mdui-textfield-label">商品名称</label>
        <input class="mdui-textfield-input" type="text" v-model="name" />
      </div>
      <div class="mdui-textfield">
        <label class="mdui-textfield-label">商品封面</label>
        <br />
        <img
          :src="this.image_url"
          width="100px"
          height="100px"
          onclick="document.getElementById('imgup').click()"
        />
        <input
          id="imgup"
          type="file"
          @change="up"
          accept="image/*"
          name="imgUrls"
          value="file1"
          style="visibility: hidden"
        />
      </div>

      <label class="mdui-textfield-label">商品分类</label>
      <br />
      <select @change="selet($event)" class="mdui-select" mdui-select>
        <option
          v-for="item in sort_list"
          :id="item.分类id"
          :value="item.分类id"
          >{{ item.分类名称 }}</option
        >
      </select>

      <br />
      <div class="mdui-textfield">
        <label class="mdui-textfield-label">商品介绍</label>
        <input class="mdui-textfield-input" type="text" v-model="details" />
      </div>
      <div class="mdui-textfield">
        <label class="mdui-textfield-label">商品价格</label>
        <input class="mdui-textfield-input" type="text" v-model="price" />
      </div>
      <div class="mdui-textfield">
        <label class="mdui-textfield-label">商品库存</label>
        <input class="mdui-textfield-input" type="text" v-model="number" />
      </div>

      <div class="mdui-textfield">
        <label class="mdui-textfield-label">展示权重(默认100)</label>
        <input class="mdui-textfield-input" type="text" v-model="weight" />
      </div>
      <br />
      <br />
      <button class="mdui-btn mdui-float-right" v-on:click="edit">
        确定修改
      </button>
      <button class="mdui-btn mdui-float-right" v-on:click="down_commodity">
        下架
      </button>
      <button class="mdui-btn mdui-float-right" v-on:click="up_commodity">
        上架
      </button>
      <div style="height: 100px"></div>
      <div class="mdui-dialog" id="commodity_list_edit_dialog">
        <div class="mdui-dialog-title">图片上传</div>
        <div class="mdui-dialog-content">
          {{ press }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as mdui from "mdui";
import axios from "axios";
import qs from "qs";
import jm from "./../../static/jm";
import sort_list from "./sort_list";

const BASE_URL = "http://127.0.0.1:8886";
export default {
  name: "login",
  data() {
    return {
      phone_number: "",
      password: "",
      name: "",
      weight: "",
      sort_id: "",
      image_url: "static/loading.jpg",
      cover: "",
      press: "0%",
      inst: "",
      details: "",
      price: "",
      number: "",
      sort_list: [],
      id: ""
    };
  },
  methods: {
    getpar(par) {
      //获取当前URL
      let local_url = document.location.href;
      //获取要取得的get参数位置
      let get = local_url.indexOf(par + "=");
      if (get == -1) {
        return "";
      }
      //截取字符串
      let get_par = local_url.slice(par.length + get + 1);
      //判断截取后的字符串是否还有其他get参数
      let nextPar = get_par.indexOf("&");
      if (nextPar != -1) {
        get_par = get_par.slice(0, nextPar);
      }
      nextPar = get_par.indexOf("?");
      if (nextPar != -1) {
        get_par = get_par.slice(0, nextPar);
      }
      nextPar = get_par.indexOf("#");
      if (nextPar != -1) {
        get_par = get_par.slice(0, nextPar);
      }
      return decodeURI(get_par);
    },
    get_image(id) {
      return BASE_URL + "/images/small/" + id + ".jpg";
    },
    get_id() {
      if (
        this.getpar("id") != null &&
        this.getpar("id").length == 28 &&
        this.getpar("id") != this.id
      ) {
        this.id = this.getpar("id");
        this.getdata();
      }
    },
    selet(e) {
      this.sort_id = e.target.value;
    },
    down_commodity() {
      this.token = window.localStorage.getItem("token");
      axios
        .post(
          BASE_URL + "/commodity/down_commodity",
          qs.stringify({ token: this.token, id: this.id }),
          { headers: { "Content-Type": "application/x-www-form-urlencoded" } }
        )
        .then(re => {
          if (re.data.状态码 === 200) {
            mdui.default.alert("下架成功");
          } else {
            mdui.default.alert(re.data.备注);
          }
        })
        .catch(err => {
          mdui.default.alert("网络错误");
        });
    },
    up_commodity() {
      this.token = window.localStorage.getItem("token");
      axios
        .post(
          BASE_URL + "/commodity/up_commodity",
          qs.stringify({ token: this.token, id: this.id }),
          { headers: { "Content-Type": "application/x-www-form-urlencoded" } }
        )
        .then(re => {
          if (re.data.状态码 === 200) {
            mdui.default.alert("上架成功");
          } else {
            mdui.default.alert(re.data.备注);
          }
        })
        .catch(err => {
          mdui.default.alert("网络错误");
        });
    },

    getdata() {
      this.get_sort_list();
      this.token = window.localStorage.getItem("token");
      axios
        .post(
          BASE_URL + "/commodity/admin_get_commodity_info",
          qs.stringify({ token: this.token, id: this.id }),
          { headers: { "Content-Type": "application/x-www-form-urlencoded" } }
        )
        .then(re => {
          if (re.data.状态码 === 200) {
            document.getElementById("comid").style.visibility = "visible";

            this.name = re.data.商品名称;
            this.cover = re.data.商品封面;
            this.image_url = this.get_image(this.cover);
            this.price = re.data.商品价格;
            this.details = re.data.商品介绍;
            this.number = re.data.商品库存;
            this.sort_id = re.data.商品分类id;
            document.getElementById(re.data.商品分类id).selected = true;
            this.weight = re.data.商品权重;
          } else {
            mdui.default.alert(re.data.备注);
          }
        })
        .catch(err => {
          mdui.default.alert("网络错误");
        });
    },
    get_sort_list() {
      axios
        .post(BASE_URL + "/sort/get_sort", qs.stringify({ fff: 111 }), {
          headers: { "Content-Type": "application/x-www-form-urlencoded" }
        })
        .then(re => {
          if (re.data.状态码 === 200) {
            this.sort_list = re.data.列表;
            this.sort_id = re.data.列表[0].分类id;
          } else {
            mdui.default.alert(re.data.备注);
          }
        })
        .catch(err => {
          mdui.default.alert("get_sort_list网络错误");
        });
    },
    up(i) {
      this.inst.open();
      let file = i.path[0].files[0];

      let ff = new FormData();
      ff.append("uploadedfile", file);
      this.token = window.localStorage.getItem("token");
      this.press = "0%";

      axios
        .post(BASE_URL + "/images/up", ff, {
          headers: { "Content-Type": "multipart/form-data" },
          onUploadProgress: progressEvent => {
            this.press =
              (((progressEvent.loaded / progressEvent.total) * 100) | 0) + "%";
            if (
              (((progressEvent.loaded / progressEvent.total) * 100) | 0) ==
              100
            )
              this.image_url = "static/loading.jpg";
          }
        })
        .then(re => {
          this.inst.close();

          this.image_url = re.data.small;
          console.log(this.image_url);
          this.cover = re.data.id;
        })
        .catch(err => {
          this.inst.close();
          mdui.default.alert("网络错误");
        });
    },
    edit() {
      if (!this.name) {
        mdui.default.alert("请输入名称");
        return;
      }
      if (!this.cover) {
        mdui.default.alert("请上传封面");
        return;
      }
      if (!this.details) {
        mdui.default.alert("请输入介绍");
        return;
      }
      if (!this.weight) {
        mdui.default.alert("请输入权重");
        return;
      }
      if (!this.price) {
        mdui.default.alert("请输入价格");
        return;
      }
      if (!this.number) {
        mdui.default.alert("请输入库存");
        return;
      }
      if (!this.weight) {
        mdui.default.alert("请输入权重");
        return;
      }

      this.token = window.localStorage.getItem("token");
      axios
        .post(
          BASE_URL + "/commodity/change_commodity",
          qs.stringify({
            token: this.token,
            id: this.id,
            name: this.name,
            weight: this.weight,
            details: this.details,
            price: this.price,
            number: this.number,
            sort_id: this.sort_id,
            cover: this.cover
          }),
          { headers: { "Content-Type": "application/x-www-form-urlencoded" } }
        )
        .then(re => {
          if (re.data.状态码 === 200) {
            mdui.default.alert("商品编辑成功");
          } else {
            if (re.data.备注 === "token无效") {
              this.token = window.localStorage.setItem("token", "");
              this.$router.push("/login");
            } else mdui.default.alert(re.data.备注);
          }
        })
        .catch(err => {
          mdui.default.alert("网络错误");
        });
    }
  },
  watch: {
    // 如果路由有变化，会再次执行该方法
    $route: "get_id"
  },
  mounted() {
    this.inst = new mdui.default.Dialog("#commodity_list_edit_dialog");
    this.get_id();
  }
};
</script>
